<template>
    <div class="onlineCourses">
      <Row>
        <i-col span="24">
          <Row :gutter="16" v-if="Data.type =='video'">
            <i-col span="12">
              <div class="img">
                <router-link :to="{path:'/videoCourse', query:{id:Data.id}}" class="a">
                  <p class="video">
                    <Icon size="50" type="md-arrow-dropright-circle" />
                    <video style="width:100%">
                      <source :src="Data.uri" type="video/mp4">
                      您的浏览器不支持 video 标签。
                    </video>
                  </p>
                </router-link>
              </div>
            </i-col>
            <i-col span="12">
              <div class="details">
                <div>
                  <p class="p1">
                    <router-link :to="{path:'/videoCourse', query:{id:Data.id}}" class="a">{{Data.title}}</router-link>
                  </p>
                  <p class="p2">讲课人：<span>{{Data.speaker}}</span></p>
                  <p class="p2">时长：<span>{{Data.playTime}}</span></p>
                  <p class="p2 p3">简介：<span>{{Data.intro}}</span></p>
                </div>
              </div>
            </i-col>
          </Row>

          <Row :gutter="16" v-if="Data.type =='pdf'">
            <i-col span="12">
              <div class="img">
                <a :href="Data.uri" class="a" target="_blank">
                  <p class="video">
                    <img :src="Data.photoUri" alt="" width="100%">
                  </p>
                </a>
              </div>
            </i-col>
            <i-col span="12">
              <div class="details">
                <div>
                  <p class="p1">
                    <a :href="Data.uri" class="a" target="_blank">{{Data.title}}</a>
                  </p>
                  <p class="p2">讲课人：<span>{{Data.speaker}}</span></p>
                  <p class="p3">简介：<span>{{Data.intro}}</span></p>
                </div>
              </div>
            </i-col>
          </Row>
        </i-col>
      </Row>
    </div>
</template>

<script>
  export default {
    props: {
      Data: {
        type: Object,
      }
    },
  }
</script>

<style scoped>
  .onlineCourses{
    height: 150px;
  }
  .onlineCourses .img {
    margin-bottom: -5px;
  }

  .onlineCourses .img .a {
    display: inline-block;
  }

  .onlineCourses .img .a > img {
    width: 100%;
    padding: 5px;
  }

  .onlineCourses .details {
    padding-right: 5px;
  }

  .onlineCourses .details .p1 {
    padding: 5px 0;
    line-height: 20px;
    font-size: 14px;

  }

  .onlineCourses .details .p1 .a {
    color: #333;

    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .onlineCourses .details .p2 {
    padding: 2px 0;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .onlineCourses .details .p3{
    /*兼容火狐*/
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
  }
  .onlineCourses>.ivu-row>.ivu-col {
    border: 1px solid #ccc;
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .video .ivu-icon{
    position: absolute;
    top: 35px;
    left: 85px;
    color: #fff;
  }
</style>
